<template>
  <el-row type="flex" :gutter="20" class="news container">
    <el-col :span="17">
      <div class="news-detail" ref="newsLeft">
        <div class="detail-content" v-if="!$util.isEmpty(newsDetail)">
          <div class="title">{{ newsDetail.title }}</div>
          <el-row type="flex" align="middle" justify="space-between" class="desc">
            <div class="left">
              <span>{{ newsDetail.publish_time | formatTime('{y}-{m}-{d}') }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ newsDetail.read_count }}人浏览</span>
              <template v-if="newsDetail.source != ''">
                <el-divider direction="vertical"></el-divider>
                <span>{{ newsDetail.source }}</span>
              </template>
            </div>
            <div class="right">
              <el-popover placement="bottom" trigger="hover">
                <edu-share></edu-share>
                <el-button type="text" slot="reference" icon="edu-icon-fenxiang1 edu-icon--left"
                  >分享</el-button
                >
              </el-popover>
            </div>
          </el-row>
          <div class="content-wrapper" v-html="newsDetail.content"></div>
        </div>
        <el-row type="flex" justify="space-between" class="detail-pagination">
          <div>
            <el-link
              v-if="!$util.isEmpty(newsPrev)"
              :underline="false"
              @click="handleNext(newsPrev.id)"
              >上一篇：{{ newsPrev.title }}</el-link
            >
          </div>
          <div>
            <el-link
              v-if="!$util.isEmpty(newNext)"
              :underline="false"
              @click="handleNext(newNext.id)"
              >下一篇：{{ newNext.title }}</el-link
            >
          </div>
        </el-row>
        <detail-comment-reply @update="handleNewsInit"></detail-comment-reply>
        <detail-comment :list="newsComments" @update="handleNewsInit"></detail-comment>
        <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
      </div>
    </el-col>
    <el-col :span="7">
      <div class="news-recommend" ref="newsrighttop">
        <div class="recommend-title">推荐资讯</div>
        <div class="recommend-list">
          <el-row type="flex" class="item" v-for="item in newsSplendid" :key="item.id">
            <div class="picture" @click="handleNext(item.id)">
              <edu-image :src="item.cover_url" fit="cover"></edu-image>
            </div>
            <div class="content">
              <div class="title" @click="handleNext(item.id)">
                {{ item.title }}
              </div>
              <div class="abstract">{{ item.abstract }}</div>
              <el-row type="flex" align="middle" class="desc">
                <span>{{ item.publish_time | formatTime('{y}-{m}-{d}') }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.read_count }}人浏览</span>
              </el-row>
            </div>
          </el-row>
        </div>
      </div>
      <div
        v-show="showRecommend"
        class="news-recommend"
        :class="{ isFixed: isFixed }"
        ref="newsRecommend"
      >
        <div class="recommend-title">相关资讯</div>
        <div class="recommend-list">
          <el-row type="flex" class="item" v-for="item in newsSimilar" :key="item.id">
            <div class="picture" @click="handleNext(item.id)">
              <edu-image :src="item.cover_url" fit="cover"></edu-image>
            </div>
            <div class="content">
              <div class="title" @click="handleNext(item.id)">
                {{ item.title }}
              </div>
              <div class="abstract">{{ item.abstract }}</div>
              <el-row type="flex" align="middle" class="desc">
                <span>{{ item.publish_time | formatTime('{y}-{m}-{d}') }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.read_count }}人浏览</span>
              </el-row>
            </div>
          </el-row>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import DetailComment from './components/detailComment'
import DetailCommentReply from './components/detailCommentReply'
import EduShare from '@/components/EduShare'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    DetailComment,
    DetailCommentReply,
    EduShare,
    EduPagination
  },
  inject: ['reload'],
  data() {
    return {
      newsDetail: {},
      newsSplendid: [],
      newsSimilar: [],
      newsComments: [],
      newsPrev: {},
      newNext: {},
      isFixed: false, //当滚动条高度大于152时是否定位
      offsetTop: 0,
      showRecommend: true
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.reload()
      }
    }
  },
  mounted() {
    this.handleNewsInit()
    window.addEventListener('scroll', this.initHeight)
  },
  methods: {
    // 资讯数据
    handleNewsInit() {
      this.$api.getTopicDetails(
        this.$route.query.id,
        {
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          this.newsDetail = res.data.detail
          this.newsSplendid = res.data.splendid
          this.newsSimilar = res.data.similar
          this.newsComments = res.data.comments.data
          this.newsPrev = res.data.prev_topic
          this.newNext = res.data.next_topic
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: res.data.comments.total
          })
          this.$nextTick(function() {
            this.offsetTop = this.$refs.newsRecommend.getBoundingClientRect().top
          })
        }
      )
    },
    // 跳转
    handleNext(id) {
      this.$router.push({
        path: '/topic/details',
        query: {
          id: id
        }
      })
    },
    // 实现吸顶效果，判断滚动条距离顶部的距离
    initHeight() {
      // 变量 scrollHeight 是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      // 变量 windowHeight 是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight

      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

      var scrollBottom = scrollHeight - windowHeight - scrollTop
      if (
        this.$refs.newsLeft.offsetHeight >
        this.$refs.newsrighttop.offsetHeight + this.$refs.newsRecommend.offsetHeight
      ) {
        this.isFixed = scrollTop > this.offsetTop ? true : false
        if (this.isFixed) {
          if (scrollBottom < 300) {
            this.showRecommend = false
          } else {
            this.showRecommend = true
          }
        } else {
          this.showRecommend = true
        }
      }
    },
    // 分页
    handleCurrentChange() {
      this.handleNewsInit()
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight, false)
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.news {
  margin-top: 10px;
  .news-detail {
    padding: 30px 25px;
    background-color: #fff;
    .content-wrapper {
      padding: 10px 30px 20px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 24px;
      letter-spacing: 1px;
      word-wrap: break-word;
      ::v-deep .image img,
      ::v-deep img {
        max-width: 100%;
      }
    }
    .detail-content {
      .title {
        color: $text-color-import;
        font-size: 22px;
        font-weight: 500;
      }
      .desc {
        margin-top: 20px;
        .left {
          color: $text-color-auxiliary;
          font-size: 12px;
        }
        .right {
          .el-button {
            padding: 0;
            color: $text-color-auxiliary;
            font-size: 12px;
          }
        }
      }
      .content {
        margin-top: 20px;
        .el-scrollbar {
          width: 100%;
          height: 100%;
        }
      }
    }
    .detail-pagination {
      margin-top: 20px;
    }
    .new-comment {
      margin-top: 30px;
    }
  }
  .news-recommend {
    background-color: #fff;
    padding: 20px;
    transition: top 0.2s;
    &.isFixed {
      position: fixed;
      top: 0;
      z-index: 10;
      width: 290px;
    }
    & + .news-recommend {
      margin-top: 10px;
    }
    .recommend-title {
      font-size: 22px;
      color: $text-color-import;
    }
    .recommend-list {
      margin-top: 15px;
      .item {
        & + .item {
          border-top: 1px solid $border-color-divider;
        }
        padding: 20px 0;
        .picture {
          height: 0;
          width: 120px;
          position: relative;
          padding-top: 66px;
          cursor: pointer;
          .el-image {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
        .content {
          flex: 1;
          margin-left: 8px;
          .title {
            font-size: 14px;
            color: $text-color-import;
            cursor: pointer;
            @include ellipsisLine(1);
            &:hover {
              @include edu-color-auxiliary;
            }
          }
          .abstract {
            margin-top: 6px;
            font-size: 13px;
            color: $text-color-secondary;
            letter-spacing: 1px;
            @include ellipsisLine(1);
          }
          .desc {
            margin-top: 14px;
            font-size: 12px;
            color: $text-color-auxiliary;
          }
        }
      }
    }
  }
}
</style>
